<style>
  .ad-content-drawer-footer{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
</style>
<template>
  <div>
    <Drawer
      :value="modalState"
      :closable="false"
      :title="title"
      @on-close="cancel"
      width="35%">
      <Form
        ref="adContentDrawer"
        :model="form"
        style="margin-top: 30px; margin-left: 10%;"
        :label-width="100">
        <FormItem prop="title" label="标题：" style="width: 300px">
          <Input v-model="form.title" type="text" placeholder="请输入标题" />
        </FormItem>
        <FormItem prop="img" label="广告图片：" style="width: 300px; margin-top: 60px;">
          <upload-ad-img @upload-success="handleUpload" :folder="folder" :row="row"></upload-ad-img>
        </FormItem>
        <FormItem prop="state" label="是否开启：" style="width: 300px; margin-top: 60px;">
          <i-switch v-model="form.openState" style="margin-left: 10px;" />
        </FormItem>
      </Form>
      <div class="ad-content-drawer-footer">
        <Button style="margin-right: 8px" @click="cancel">返回</Button>
        <Button type="primary" @click="handleSubmit">创建</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
import UploadAdImg from '_c/upload-ad-img'
export default {
  name: 'AdContentDrawer',
  props: {
    modalState: Boolean,
    row: null
  },
  components: {
    UploadAdImg
  },
  data () {
    return {
      title: '创建广告内容',
      loading: true,
      folder: 'adContent',
      form: {
        title: '',
        img: '',
        state: '',
        openState: false
      }
    }
  },
  methods: {
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$emit('ad-content-valid', {
        drawer: this.$refs['adContentDrawer'],
        id: this.row.id,
        title: this.form.title,
        img: this.form.img,
        state: this.form.openState === true ? 0 : 1
      })
    },
    cancel () {
      this.$emit('on-cancel', this.$refs['adContentDrawer'])
    },
    handleUpload (url) {
      this.form.img = url
    }
  }
}
</script>
